import React, { useState } from 'react';

/**
 * hooks示例
 */
export default function App(props) {
    const [count, setCount] = useState(0);
    const numberRef = React.createRef();

    const increment = () => {
        const number = numberRef.current.value * 1;
        setCount(count + number);
    };

    const decrement = () => {
        const number = numberRef.current.value * 1;
        setCount(count - number);
    };

    const incrementIfOdd = () => {
        const number = numberRef.current.value * 1;
        if (count % 2 === 1) {
            setCount(count + number);
        }
    }

    const incrementAsync = () => {
        const number = numberRef.current.value * 1;
        setTimeout(() => {
            setCount(count + number);
        },1000)
    }

    return (
        <div>
            <p>click {count} times</p>
            <div>
                <select ref={numberRef}>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                </select>&nbsp;
                <button onClick={increment}>+</button>&nbsp;
                <button onClick={decrement}>-</button>&nbsp;
                <button onClick={incrementIfOdd}>increment if odd</button>
                <button onClick={incrementAsync}>increment async</button>
            </div>
        </div>
    );
}